﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>飞羽体育</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
</head>
<body>
<div id="page" v-cloak>
    <div class="fromWrap">
        <div class="loginHead">
            <a class="back" style="background: none"></a>
        </div>
        <form class="userComForm">
            <h1>{{type}}</h1>
            <div class="show1px">
                <label>手机号</label>
                <input type="tel" v-model="phone" placeholder="请输入手机号"/>
            </div>
            <div class="show1px qrCode qrCodeMM" v-show="isShowEle">
                <label>验证码</label>
                <input type="tel" v-model="code" placeholder="6位"/>
                <span><b></b><a @click="sendCode" :class="{activeColor:!isSendCode}">{{timeTips}}</a></span>
            </div>
            <div class="show1px qrCode">
                <label>密码</label>
                <input :type="eye ? 'text' : 'password'" v-model="password" placeholder="6-12位"/>
                <span :class="{active:eye}" @click="eye=!eye"><b></b></span>
            </div>
            <div class="show1px" v-show="isShowEle">
                <label>密码</label>
                <input type="password" v-model="confirmpassword" placeholder="确认密码"/>
            </div>
            <p class="clearfix"><a @click="changeType">{{typeT}}</a></p>
            <a :class="{active:isAllFill}" @click="selectType" style="margin-top: 0.5rem;">{{type}}</a>
        </form>
    </div>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
<script src="js/utils.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#page",
        data:{
            type: '登录',
            typeT: '去注册 ?',
            phone: '',
            code: '',
            password: '',
            confirmpassword: '',
            codeId: '',
            eye: false,
            timeTips: '获取验证码'
        },
        computed:{
            isShowEle:function(){
                return this.type !== '登录';
            },
            isAllFill:function(){
                if(this.type === '登录'){
                    return this.phone && this.password
                }else{
                    return this.phone && this.code && this.password && this.confirmpassword;
                }
            },
            isSendCode:function(){
                return this.timeTips === '获取验证码' || this.timeTips === '重新获取验证码';
            }
        },
        methods:{
            /*
            * 登录和注册切换
            * */
            changeType:function(){
                if(this.type === '登录'){
                    this.type = '注册';
                    this.typeT = '已有账户?';
                }else{
                    this.type = '登录';
                    this.typeT = '去注册 ?';
                }
            },
            isPassed:function(){
                return utils.validate('phone' , this.phone)
                    && utils.validate('code' , this.code )
                    && utils.validate('noNull' , this.password , '密码')
                    && utils.validate('noNull' , this.password , '密码')
                    && this.codeId;
            },
            login:function(){
                var that = this ;
                $.ajax({
                    url: utils.AJAX_SRC + "Login",
                    data: {
                        phone: that.phone,
                        password: that.password,
                        openid: utils.getParam('openid'),
                        nickname: utils.getParam('nickname'),
                        sex: utils.getParam('sex'),
                        headimgurl: utils.getParam('headimgurl'),
                        province: utils.getParam('province'),
                        city: utils.getParam('city'),
                        unionid: utils.getParam('unionid')
                    },
                    type: "POST",
                    success: function (result) {
                        if (result.errcode == 0) {
                            localStorage.setItem("token", result.data.token);
                            location.replace(utils.getParam("backurl") == null ? "index.html" : utils.getParam("backurl"));
                        }else{
						 utils.showTips(result.errmsg);
						}
                    }
                })
            },
            register:function(){
                var that = this;
                $.ajax({
                    url: utils.AJAX_SRC + "Register",
                    data: {
                        phone: that.phone,
                        password: that.password,
                        code: that.code,
                        codeId: that.codeId,
                        confirmpassword: that.confirmpassword,
                        openid: utils.getParam('openid'),
                        nickname: utils.getParam('nickname'),
                        sex: utils.getParam('sex'),
                        headimgurl: utils.getParam('headimgurl'),
                        province: utils.getParam('province'),
                        city: utils.getParam('city'),
                        unionid: utils.getParam('unionid')
                    },
                    type: "POST",
                    success: function (result) {
                        if (result.errcode == 0) {
                            that.type = '登录';
                            utils.showTips('注册成功');
                        }else{
						 utils.showTips(result.errmsg);
						}
                    }
                })
            },
            selectType:function(){
                if(this.type === '登录'){
                    this.login();
                }else{
                    this.register();
                }
            },
            /*
            * 发送验证码
            * phone: 手机号
            * */
            sendCode:function(){
                var that = this;
                if(!that.isSendCode) return;
                if(!utils.validate('phone' , that.phone)) return;
                $.ajax({
                    url: utils.AJAX_SRC + "Register/sendCode",
                    data: { phone: that.phone },
                    type: "POST",
                    success: function (result) {
                        if(result.errcode !== 0){
                            utils.showTips(result.errmsg);
                            return;
                        }
                        that.codeId = result.data.codeId;
                        that.timeTips = '60s后重新获取';
                        utils.showTips('验证码已发送');
                        let counts = 60;
                        let timer = setInterval(()=>{
                            counts--;
                            that.timeTips = counts + 's后重新获取';
                            if(counts <= 0 ){
                                that.timeTips = '重新获取验证码';
                                clearInterval(timer);
                            }
                        },1000);
                    }
                });
            }
        }
    });
</script>